<!-- 
    Document   : htmlEditDemo
    Created on : 2008-6-24, 1:27:51
    Author     : Brian.Xie
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript">
            var editor;
            
            window.onload = init;
            function init() {
                editor = document.getElementById("HtmlEdit").contentWindow;
    
                //只需键入以下设定，iframe立刻变成编辑器。
                editor.document.designMode = 'On';
                editor.document.contentEditable = true;
    
                //但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
                //editor.document.open();
                //editor.document.writeln('<html><body></body></html>');
                //editor.document.close();
            }

            //字体特效 － 加粗方法一
            function addBold()
            {
                editor.focus();
                //所有字体特效只是使用execComman()就能完成。
                editor.document.execCommand("Bold", false, null);
            }
            //字体特效 － 加粗方法二
            function addBold2()
            {   
                editor.focus();
                //获得选取的焦点
                var sel = getFieldSelection();
                alert(sel);
                //insertHTML("<b>"+sel.text+"</b>");
            }
            
            
            function getIframeData(){
                document.form1.test.value=editor.document.body.innerHTML;
            }
            function sentIframeData(){
                editor.document.body.innerHTML=document.form1.test.value;
            }
            
            
            function getFieldSelection()
            {
                if (editor.document.selection) {
                    return editor.document.selection.createRange();
                } else {
                    return editor.window.getSelection().getRangeAt(0);
                }
            }
            
            function test1() {
                var irange = editor.window.getSelection().getRangeAt(0);
                
                if(irange.startContainer.nodeName != "#text"){
                    var nodeOffset = irange.startOffset;
                    var selectedNode = irange.startContainer.childNodes[nodeOffset];
                    alert(selectedNode.nodeName);
                }

                if(irange.startContainer.nodeName == "#text"){
                    alert(0);
                    alert(irange.startContainer.parentNode.nodeName);
                    if(irange.startContainer.parentNode.nodeName == "A"){
                        alert(1);
                    }
                }
            }
            

        </script>
    </head>
    <body>
        <form action="#" method="post" name="form1">
            <IFRAME id="HtmlEdit" style="WIDTH: 100%; HEIGHT: 296px" border="0" marginWidth=0 marginHeight=0>
            </IFRAME>
            <textarea name="test" rows="10" id="test" style="width:100%;"></textarea>
            <br>
            <input type="button" value="iframe->textarea" onClick="getIframeData()">
            <input type="button" value="textarea->iframe" onClick="sentIframeData()">
            <input type="button" value="B" onClick="test1();">
            <input name="textfield" type="text" id="textfield" value="6ddddd" size="20" maxlength="20" style=" text-align:center">
    </form>
    </body>
</html>
